<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1 v-if="flag">成功</h1>
        <h1 v-else>失败</h1>
        <button @click="handleChange">切换</button>
        <hr/>
        成绩:<input v-model="score"/>
        <h1 v-if="score==''"></h1>
        <h1 v-else-if="score>=90">优秀 >= 90</h1>
        <h2 v-else-if="score>=80">良好 >= 80</h2>
        <h3 v-else-if="score>=60">及格 >= 60</h3>
        <h4 v-else>不及格</h4>
    </div>
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return{
                    flag:false,
                    score:0,
                }
            },
            methods:{
                handleChange(){
                    this.flag = !this.flag
                }
            }
        }).mount('#app')
    </script>
</body>
</html>